<template>
    <view style="width: 100%;">
        <view class="selectInput">
            <picker class="picker" @change="bindPickerChange" :range-key="props.attrs.label" :value="getIndex()" :range="props.options">
                <view class="value" v-if="props.modelValue || props.modelValue === 0 ">{{props.options.find(item => item[props.attrs.value] == props.modelValue)?.[props.attrs.label]??''}}</view>
                <view v-else class="placeholder">
                    {{props.placeholder}}
                </view>
            </picker>
            <uni-icons class="downIcon" type="down" size="13"></uni-icons>
        </view>
    </view>
</template>

<script setup lang="ts">
    const props = defineProps({
        modelValue: {
            type: [String, Number],
            default: () => ''
        },
        options: {
            type: Array,
            default: () => []
        },
        attrs: {
            type: Object,
            default: () => ({label: 'text', value: 'value'})
        },
        placeholder: {
            type: String,
            default: () => '请选择内容'
        }
    })
    const emit = defineEmits(['change', 'update:modelValue'])
    
    const bindPickerChange = (e) => {
        const index = e.detail.value
        const val = props.options[index]?.[props.attrs.value]
        emit('update:modelValue', val)
        emit('change', val)
    }
    const getIndex = () => {
       return props.options.length ? props.options.findIndex(item => props.modelValue == item[props.attrs.value]) : ''
    }
</script>

<style lang="scss" scoped>
    .content {
        padding: 20rpx;
        background-color: #fff;
        .header {
            position: relative;
            text-align: center;
            padding: 20rpx;
            .icon {
              position: absolute;
              right: 20rpx;
              top: 20rpx;
            }
        }
        .main {
            height: 500rpx;
            overflow: auto;
            padding: 20rpx;
            margin-top: 40rpx;
            .label {
                margin-bottom: 20rpx;
            }
        }
        .footer {
            .btn {
                border-radius: 200rpx;
            }
        }
    }
    .selectInput {
        font-size: 0.875rem;
        border: 1px solid #e5e5e5;
        box-sizing: border-box;
        border-radius: 0.25rem;
        padding: 0 0.3125rem;
        padding-left: 0.625rem;
        position: relative;
        display: flex;
        -webkit-user-select: none;
        user-select: none;
        flex-direction: row;
        align-items: center;
        border-bottom: solid 1px #e5e5e5;
        width: 100%;
        flex: 1;
        // height: 2.1875rem;
        min-height: 2.1875rem;
        display: flex;
        justify-content: space-between;
        position: relative;
        .downIcon {
            position: absolute;
            right: 10rpx;
            top: 0;
            bottom: 0;
            margin: auto;
            height: 30rpx;
        }
        .picker {
            width: 100%;
            min-height: 2.1875rem;
        }
        .value {
            display: flex;
            align-items: center;
            height: 2.1875rem;
            min-height: 2.1875rem;
        }
        .placeholder {
            color: #6a6a6a;
        }
    }
    ::v-deep.uni-checkbox-input {
        border-radius: 100%;
        background-color: #fff;
        svg {
            color: #fff;
            path {
                fill: #fff;
            }
        }
    }
    .checked {
        ::v-deep.uni-checkbox-input {
            background-color: #007aff;
        }
    }
</style>